

<template>
  <div class="h100">
    <div class="f f-col h100 rel o-hide">
      <van-search
        class="p-tb-20 doctor_search"
        left-icon="false"
        show-action
        v-model="form.keyword"
        shape="round"
        placeholder="请输入关键字"
      >
        <div slot="action" class="c007bff">搜索</div>
      </van-search>
      <div class="f f-col h100">
        <van-dropdown-menu :close-on-click-outside="false" style="min-height:50px;">
          <van-dropdown-item :title="form.stutas.value" v-model="form.stutas" :options="option">
            <div v-if="option.length === 0">
              <p class="van-hairline--top center c999">
                <br>
                <br>暂无城市数据!
                <br>
                <br>
                <br>
                <br>
              </p>
            </div>
          </van-dropdown-item>
          <van-dropdown-item title="时间范围（不限）" ref="item">
            <div class="pl20 pr20 pb20 van-hairline--top pt15">
              <p class="c999 p10">自定义时间范围</p>
              <div class="f a-c round overhidden" @click="calendarDiang = true">
              <van-cell-group>
                <van-field
                  class="bg"
                  placeholder="请选择时间范围"
                  v-model="form.startTime"
                  readonly
                ></van-field>
              </van-cell-group>
              <van-cell-group>
                <van-field
                  class="bg"
                  placeholder=""
                  v-model="form.endTime"
                  readonly
                />
              </van-cell-group>
              </div>
               <p class="c999 p10 mt20">快捷选择</p>
              <div class="f">
                <van-button class="w100" type="default" size="small" @click="toDay">不限</van-button>
                <van-button class="w100 ml15 mr15" type="default" size="small" @click="toDay">今天</van-button>
                <van-button class="w100 ml15 mr15" type="default" size="small" @click="toDay">昨天</van-button>
                <van-button class="w100" type="default" size="small" @click="oneMonth">一周</van-button>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
        <div class="h100 rel wrapper bg overhidden">
          <div class="p10">
          <div class="bg-white mb20 round" v-for="(item,index) in orderList" :key="index">
            <div class="f">
              <div class="w100 rel expense-account p15">
                <div class="f j-b a-c pb5 van-hairline--bottom">
                  <div class="w100 f j-b a-c j-b">
                    <div class="f j-s f14 pt10 pb10">
                      <b class="mr20">{{item.title}}</b>
                      <b>¥ {{item.price}}</b>
                    </div>
                    <van-tag type="primary" size="large">{{item.status}}</van-tag>
                  </div>
                </div>
                <div class="f12 mt10">
                  <p class="c999 mt5">订单金额{{item.price}}</p>
                  <p class="c999 mt5">下单时间：{{item.time}}</p>
                  <p class="c999 mt5">订单摘要：{{item.content}}</p>
                </div>
              </div>
            </div>
          </div>
          </div>
          <p class="c999 center">- 我是有底线的 -</p>
        </div>
      </div>
    </div>

    <van-calendar v-model="calendarDiang" color="#1989fa" :default-date=[] :min-date="minDate" :max-date="maxDate" type="range"  @confirm="calendarDiang = false"/>


  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {

      calendarDiang:false,

      maxDate: new Date(),
      minDate: new Date(2010, 0, 1),

      option: [
        {
          text: "订单状态（全部）",
          value: ""
        },
        {
          text: "已支付",
          value: "DRAFT"
        },
        {
          text: "已完成",
          value: "SUBMITED"
        },
        {
          text: "已退款",
          value: "AUDITING"
        },
        {
          text: "已取消",
          value: "REJECT"
        }
      ],

      form: {
        stutas: "",
        startTime: null,
        endTime: null,
        start: 1,
        end: 20,
        name: "",
        times: new Date()
      },

      orderList: [
        {
          title: "是附属是",
          status: "已支付",
          time: "2020-03-14 10:55",
          content: "啊发送发发顺丰按时打算发送到",
          id: "11",
          price: 26
        },
        {
          title: "是附属是",
          status: "已支付",
          time: "2020-03-14 10:55",
          content: "啊发送发发顺丰按时打算发送到",
          id: "11",
          price: 26
        },
        {
          title: "是附属是",
          status: "已支付",
          time: "2020-03-14 10:55",
          content: "啊发送发发顺丰按时打算发送到",
          id: "11",
          price: 26
        },
        {
          title: "是附属是",
          status: "已支付",
          time: "2020-03-14 10:55",
          content: "啊发送发发顺丰按时打算发送到",
          id: "11",
          price: 26
        },
        {
          title: "是附属是",
          status: "已支付",
          time: "2020-03-14 10:55",
          content: "啊发送发发顺丰按时打算发送到",
          id: "11",
          price: 26
        }
      ]
    };
  },
  created() {},
  mounted() {
    var roll = new BScroll(".wrapper", {
      probeType: 2,
      click: true
    });
  },
  methods: {
    toDay() {
      this.form.startTime = moment().format("YYYY-MM-DD");
      this.form.endTime = moment().format("YYYY-MM-DD");
    },
    oneMonth() {
      this.form.startTime = moment()
        .subtract(1, "month")
        .format("YYYY-MM-DD");
      this.form.endTime = moment().format("YYYY-MM-DD");
    },
    threeMonth() {
      this.form.startTime = moment()
        .subtract(3, "month")
        .format("YYYY-MM-DD");
      this.form.endTime = moment().format("YYYY-MM-DD");
    },
    timeRest() {
      this.form.startTime = "";
      this.form.endTime = "";
    },
    onTab() {
      this.roll.refresh();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.expense-account::after {
  content: "";
  position: absolute;
  top: 45%;
  left: -8px;
  width: 13px;
  height: 13px;
  background: #ececf7;
  border-radius: 100%;
}
.expense-account::before {
  content: "";
  position: absolute;
  top: 45%;
  right: -8px;
  width: 13px;
  height: 13px;
  background: #ececf7;
  border-radius: 100%;
}
</style>
